﻿//流程控件
$(document).ready(function () {
    var id = 0;
    var isDown = false;
    var isDrag = false;
    var dragNode = null;
    var dragNodeOffset = null;
    var lineStartNode = null;
    var drawingLinePoint = [];

    var blackLine = "rgba(0,0,0,1)";
    var radLine = "rgba(255,0,0,1)";
    var code = 0;
    var methods = null;
    $.fn.flow = function (method, args) {
        var flow = this;
        return $.controlInit("flow", flow, method, args);
    };

    //控件默认值
    $.fn.flow.defaultOption = {
        width: 500,
        height: 500,
        borderWidth: 1,
        borderColor: "#ff0000",
        nodeSelectCss: "",
        nodeCss: ""
    };
    //节点默认值
    $.fn.flow.defaultNodeOption = {
        text: "",
        width: 40,
        height: 40,
        /*borderWidth: 0,
        borderColor: "",*/
        top: 20,
        left: 20,
        selected: false,
        caption: "",
        childFlowNodes: null,
        type: "general",
        parentNodeCode: null
    };
    //获取画布
    function getCanvas(ctl, isTemp) {
        if (isTemp) {
            return ctl.data("canvasTemp");
        }
        else {
            return ctl.data("canvas");
        }
    };
    //获取画布上下文对象
    function getCanvasContext(ctl, isTemp) {
        var canvas = getCanvas(ctl, isTemp);
        if (canvas.length > 0) {
            var context = canvas.get(0).getContext("2d");
            return context;
        }
        return null;
    };

    //判断鼠标是否在线上
    function pointInLine(p, sp, ep) {
        var xlen = 0;
        var ylen = 0;
        var len1 = 0; //sp到p的距离
        var len2 = 0; //ep到p的距离
        var len3 = 0; //sp到ep的距离

        xlen = Math.abs(Math.pow(sp.x - p.x, 2));
        ylen = Math.abs(Math.pow(sp.y - p.y, 2));
        len1 = Math.sqrt(xlen + ylen);

        xlen = Math.abs(Math.pow(ep.x - p.x, 2));
        ylen = Math.abs(Math.pow(ep.y - p.y, 2));
        len2 = Math.sqrt(xlen + ylen);

        xlen = Math.abs(Math.pow(ep.x - sp.x, 2));
        ylen = Math.abs(Math.pow(ep.y - sp.y, 2));
        len3 = Math.sqrt(xlen + ylen);
        var tmp = (len1 + len2) - len3 //Math.round((len1 + len2)) - Math.round(len3);
        if (tmp < 0.1) {
            return true;
        }
        return false;
    }

    //是否处于画线状态
    function isDrawLine(ctl) {
        return ctl.data("isDrawLine");
    };
    //设置是否画线
    function setDrawLine(ctl, status) {
        ctl.data("isDrawLine", status);
    };
    //判断元素是否个节点
    function isNode(el) {
        if (el.tagName == "DIV" && el.getAttribute("node") == "1") {
            return true;
        }
        return false;
    }
    //判断元素是否是画布
    function isCanvas(el) {
        if (el.tagName == "DIV") {
            if (el.tagName == "DIV") {
                if (el.parentNode.tagName == "CANVAS") {
                    return true;
                }
                return false;
            }
            return true;
        }
        else if (el.tagName == "CANVAS") {
            return true;
        }
        return false;
    }

    //设置线样式
    function lineStyle(context, lineWidth, color) {
        context.lineWidth = lineWidth;
        context.strokeStyle = color;
        context.fillStyle = color;
        //context.lineJoin = "round";
    }
    //选中线
    function selectedLine(ctl, line, lines) {
        lines = lines || $.fn.flow.methods.getAllLines(ctl);
        for (var i = 0; i < lines.length; i++) {
            var l = lines[i];
            if (l != line) {
                l.selected = false;
                l.color = blackLine;
            }
            else {
                l.selected = true;
                l.color = radLine;
            }
        }
    }
    //选中节点
    function selectedNode(ctl, node) {
        var options = $.fn.flow.methods.options(ctl);
        var nodes = $.fn.flow.methods.getAllNodes(ctl);
        for (var i = 0; i < nodes.length; i++) {
            var obj = $.fn.flow.methods.getNodeObject(ctl, nodes[i]);
            if (obj) {
                obj.selected = false;
                if (options.nodeSelectCss) {
                    nodes[i].removeClass(options.nodeSelectCss);
                    nodes[i].addClass(options.nodeCss);
                }
            }
        }
        if (node) {
            var curObj = $.fn.flow.methods.getNodeObject(ctl, node);
            curObj.selected = true;
            if (options.nodeSelectCss) {
                node.addClass(options.nodeSelectCss);
                node.removeClass(options.nodeCss);
            }
        }
    }


    //设置节点相关元素
    function setNodeJoinElement(node, canvas) {
        if (!node) {
            return;
        }
        var font = $("font[nodeText=1][node=" + node.attr("id") + "]");
        var nodeOffset = node.offset();
        var canvasOffset = canvas.offset();
        var nodeTop = nodeOffset.top - canvasOffset.top;
        var nodeLeft = nodeOffset.left - canvasOffset.left;
        if (font.length > 0) {
            font.css("top", nodeTop + node.outerHeight());
            var offsetLeft = (node.outerWidth() - font.outerWidth()) / 2;
            font.css("left", nodeLeft + offsetLeft);
        }
    }
    //设置节点坐标位置
    function setNodeLeftTop(ctl, node, top, left) {
        if (!node) {
            return;
        }
        var obj = methods.getNodeObject(ctl, node);
        obj.top = top;
        obj.left = left;
        node.css({ "top": top, "left": left });
        setNodeJoinElement(node, getCanvas(ctl));
    }

    //显示备注
    function showCaption(ctl, caption, mouse, captionbox) {
        var captionbox = captionbox || ctl.children("div.captionbox");
        if (caption) {
            captionbox.html(caption);
            var ctlOffset = ctl.offset();
            var x = mouse.x + 10 - ctlOffset.left + ctl.scrollLeft();
            var y = mouse.y + 10 - ctlOffset.top + ctl.scrollTop();
            captionbox.css({ "top": y, "left": x });
            captionbox.show();
        }
    }
    //隐藏备注
    function hideCaption(captionbox) {
        var captionbox = captionbox || ctl.children("div.captionbox");
        captionbox.hide();
    }

    //附加节点拖拽事件
    function addNodeEvent(ctl, node) {
        //var isDown = false;
        var temp = [];
        var canvas = getCanvas(ctl, false);
        var context = getCanvasContext(ctl, false);
        var contextTemp = getCanvasContext(ctl, true);
        var offsetPoint = null;
        var isput = false;
        var downNode = null;
        var spoint = { x: 0, y: 0 };
        var ismove = false;
        var canvasOffset = canvas.offset();
        var captionbox = ctl.children("div.captionbox");
        //        node.bind("click", function () {
        //            if (isDrawLine(ctl)) {
        //                lineStartNode = node;
        //            }
        //        })
        node.bind("contextmenu", function (evt) {
            var options = methods.options(ctl);
            if ($.isFunction(options.nodeContextmenu)) {
                options.nodeContextmenu(ctl, node, evt);
            }
            return false;
        });
        node.bind("mouseout", function (evt) {
            hideCaption(captionbox);
        })
        //备注悬浮事件
        node.bind("mousemove", function (evt) {
            //if (!isDown) {
            var obj = $.fn.flow.methods.getNodeObject(ctl, node);
            showCaption(ctl, obj.caption, { x: evt.pageX, y: evt.pageY }, captionbox);
            return false;
            //}
        });
        node.bind("mousedown", function (evt) {
            //            if (evt.which == 1)//鼠标左键
            //            {
            //                isDown = true;
            //                downNode = node;
            //                var x = evt.pageX;
            //                var y = evt.pageY;
            //                var offset = node.offset();
            //                var offsetX = x - offset.left;
            //                var offsetY = y - offset.top;
            //                offsetPoint = { x: offsetX, y: offsetY };
            //                spoint = { x: x, y: y };
            //                $(document).bind("mousemove", nodeMouseMoveHandler);
            //                captionbox.hide();
            //            }
            //            node.bind("mouseup", nodeMouseUpHandler);
            //            $.emptySelected();
        });
        function nodeMouseMoveHandler(evt) {
            //            $.emptySelected();
            //            if (!isDrawLine(ctl)) {
            //                //拖拽节点
            //                if (Math.abs(spoint.x - evt.pageX) > 5 || Math.abs(spoint.y - evt.pageY) > 5) {
            //                    var x = evt.pageX - offsetPoint.x + ctl.scrollLeft();
            //                    var y = evt.pageY - offsetPoint.y + ctl.scrollTop();
            //                    if (x < canvasOffset.left) {
            //                        x = canvasOffset.left;
            //                    }
            //                    if (y < canvasOffset.top) {
            //                        y = canvasOffset.top;
            //                    }
            //                    //document.title = ctl.scrollLeft();
            //                    x -= canvasOffset.left;
            //                    y -= canvasOffset.top;
            //                    node.css("top", y);
            //                    node.css("left", x);
            //                    dragNode = node;
            //                    ismove = true;
            //                    setNodeLeftTop(ctl, dragNode, y, x);
            //                }
            //            }
            //            else {
            //                node.unbind("mouseup", nodeMouseUpHandler);
            //                $(document).unbind("mousemove", nodeMouseMoveHandler);
            //            }
            //            $.emptySelected();
        }
        function nodeMouseUpHandler(evt) {
            $(document).unbind("mousemove", nodeMouseMoveHandler);
            node.unbind("mouseup", nodeMouseUpHandler);
            if (isDrawLine(ctl)) {
                if (evt.target.tagName == "DIV") {
                    var tnode = $(evt.target);
                    if (tnode.attr("node") == "1" && downNode != tnode) {
                        $.fn.flow.methods.addLine(ctl, { fromNode: node, toNode: tnode });
                    }
                }
            }
            else {
                var context = getCanvasContext(ctl, false);
                if (ismove) {
                }
                else {
                    if (evt.which == 1) {
                        var options = $.fn.flow.methods.options(ctl);
                        var lines = $.fn.flow.methods.getAllLines(ctl);
                        selectedNode(ctl, node);
                        selectedLine(ctl, null, lines);
                        mappingLines(getCanvasContext(ctl, false), lines);
                        if ($.isFunction(options.nodeSelected)) {
                            options.nodeSelected(node);
                        }
                    }
                }
            }
            ismove = false;
            captionbox.hide();
            //node.css("cursor", "default");
        }
    };

    //为节点添加线
    function addLineByNode(node, line, isIn) {
        if (isIn) {
            var inLines = node.data("inLines");
            var m = false;
            for (var i = 0; i < inLines.length; i++) {
                var inline = inLines[i];
                if ((inline.toNode.get(0) == line.toNode.get(0)) && (inline.fromNode.get(0) == line.fromNode.get(0))) {
                    m = true;
                    break;
                }
            }
            if (!m) {
                inLines.push(line);
            }
        } else {
            var outLines = node.data("outLines");
            var m = false;
            for (var i = 0; i < outLines.length; i++) {
                var outline = outLines[i];
                if ((outline.toNode.get(0) == line.toNode.get(0)) && (outline.fromNode.get(0) == line.fromNode.get(0))) {
                    m = true;
                    break;
                }
            }
            if (!m) {
                outLines.push(line);
            }
        }
    }
    //为节点移除线
    function removeLineByNode(node, line) {
        var inLines = node.data("inLines");
        var outLines = node.data("outLines");
        var i = $.inArray(line, inLines);
        if (i >= 0) {
            inLines.splice(i, 1);
        }
        var i = $.inArray(line, outLines);
        if (i >= 0) {
            outLines.splice(i, 1);
        }
    }
    //得到两个节点间的线
    function getLine(fromNode, toNode) {
        var lines = fromNode.data("outLines");
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i];
            if (line.fromNode.get(0) == fromNode.get(0) && line.toNode.get(0) == toNode.get(0)) {
                return line;
            }
        }
        return null;
    }
    //清空当前节点所有的线
    function clearLinesByNode(node) {
        //var lines = node.data("lines");
        var inLines = node.data("inLines");
        var outLines = node.data("outLines");
        //lines.splice(0, lines.length);
        inLines.splice(0, inLines.length);
        outLines.splice(0, outLines.length);
    }
    //为节点添加节点
    function addNodebyNode(fromNode, toNode) {
        fromNode.data("toNodes").push(toNode);
        toNode.data("fromNodes").push(fromNode);
    }
    //移除节点
    function removeNodeByNode(fromNode, toNode) {
        var tnodes = fromNode.data("toNodes");
        var fnodes = toNode.data("fromNodes");
        var index1 = [];
        for (var i = 0; i < tnodes.length; i++) {
            if (tnodes[i].get(0) == toNode.get(0)) {
                index1.push(i);
            }
        }
        var index2 = [];
        for (var i = 0; i < fnodes.length; i++) {
            if (fnodes[i].get(0) == fromNode.get(0)) {
                index2.push(i);
            }
        }
        for (var i = 0; i < index1.length; i++) {
            if (index1[i] >= 0) {
                tnodes.splice(index1[i], 1);
            }
        }
        for (var n = 0; n < index2.length; n++) {
            if (index2[n] >= 0) {
                fnodes.splice(index2[n], 1);
            }
            //alert("aaa")
        }
    }
    //获取当前指定节点不相关的线
    function getLinesExcludeByNode(ctl, node) {
        var temp = [];
        //获取所有的线
        var lines = $.fn.flow.methods.getAllLines(ctl);
        //获取当前节点的线
        var array = $.fn.flow.methods.getLinesByNode(ctl, node);
        //alert("线总数：" + array.length);
        if (array) {
            //获取拖拽节点时与当前节点不相关的线
            for (var i = 0; i < lines.length; i++) {
                if ($.inArray(lines[i], array) < 0) {
                    temp.push(lines[i]);
                }
            }
        }
        return temp;
    }
    //重新画线
    function mappingLines(context, lines) {
        var canvas = $(context.canvas);
        clearCanvas(context);
        //context.clearRect(0, 0, canvas.outerWidth(), canvas.outerHeight());
        var selectLine = [];
        for (var i = 0; i < lines.length; i++) {
            var line = lines[i];
            var fromNode = line.fromNode;
            var toNode = line.toNode;
            if (!line.selected) {
                var color = line.color;
                if (!color) {
                    line.color = blackLine;
                }
                lineStyle(context, 1, color);
                var newline = drawMLine(fromNode, toNode, context, true);
                line.point = newline.point;
            }
            else {
                selectLine.push(line);
            }
        }
        if (selectLine.length > 0) {
            for (var i = 0; i < selectLine.length; i++) {
                var line = selectLine[i];
                line.color = radLine;
                lineStyle(context, 1, line.color);
                var newline = drawMLine(line.fromNode, line.toNode, context, true);
                line.point = newline.point;
            }
        }
    }

    //开始画线
    function startDrawLine(ctl) {
        setDrawLine(ctl, true);
    }
    //结束画线
    function endDrawLine(ctl) {
        setDrawLine(ctl, false);
    }
    //鼠标画线处理方法
    function DrawLineHandler(ctl, spoint, epoint, isClear, evt) {
        var context = getCanvasContext(ctl, true);
        if (isClear) {
            clearCanvas(context);
        }
        lineStyle(context, 1, "rgba(0,0,0,0.5)");
        var mouse = { x: evt.pageX, y: evt.pageY };
        if (epoint) {
            mouse = null;
        }
        var line = drawLine(spoint, epoint, context, true, mouse);
        return line;
    }
    //清空画布
    function clearCanvas(context) {
        var canvas = $(context.canvas);
        context.clearRect(0, 0, canvas.outerWidth(), canvas.outerHeight());
    }

    function drawLine(spoint, epoint, context, isArrow, mouse) {
        var eX = 0;
        var eY = 0;
        if (!mouse) {
            eX = epoint.x;
            eY = epoint.y
        }
        else {
            eX = mouse.x;
            eY = mouse.y;
        }
        var sX = spoint.x;
        var sY = spoint.y;
        //        var sWidth = startNode.outerWidth(), sHeight = startNode.outerHeight();
        //        var eWdith = 0, eHeight = 0;
        //        if (endNode) {
        //            eWdith = endNode.outerWidth();
        //            eHeight = endNode.outerHeight();
        //        }
        var start = { x: sX, y: sY }, end = { x: eX, y: eY };
        var canvas = $(context.canvas);
        start.x -= canvas.offset().left;
        start.y -= canvas.offset().top;
        end.x -= canvas.offset().left;
        end.y -= canvas.offset().top;
        var offset = eY - sY;
        var line = { point: [] };
        var point = line.point;
        point.push(start);
        point.push(end)
        context.beginPath();
        for (var i = 0; i < point.length; i++) {
            if (i == 0) {
                context.moveTo(point[i].x, point[i].y);
            }
            else {
                context.lineTo(point[i].x, point[i].y);
            }
        }
        context.lineJoin = "round";
        context.stroke();
        context.closePath();
        if (isArrow) {
            drawArrowHead(start, end, 10, 30, context);
        }
        return line;
    }

    function drawLineForPoints(points, context) {
        $.loop(points, function (v, i) {
            if (i < points.length) {
                drawLine(v, points[i + 1], context, false);
            }
        });
    }

    //画连接线
    function drawMLine(startNode, endNode, context, isArrow, mouse) {
        var eX = 0;
        var eY = 0;
        if (!mouse) {
            eX = endNode.offset().left;
            eY = endNode.offset().top;
        }
        else {
            eX = mouse.x;
            eY = mouse.y;
        }
        var sX = startNode.offset().left;
        var sY = startNode.offset().top;
        var sWidth = startNode.outerWidth(), sHeight = startNode.outerHeight();
        var eWdith = 0, eHeight = 0;
        if (endNode) {
            eWdith = endNode.outerWidth();
            eHeight = endNode.outerHeight();
        }
        var left = false, bottom = false, right = false, top = false;
        if (sX > (eX + eWdith / 2)) {
            right = true;
        }
        if ((sX + sWidth / 2) < eX) {
            left = true;
        }
        if (sY > eY) {
            bottom = true;
        }
        if (sY < eY) {
            top = true;
        }
        var start = {};
        var end = {};
        start = { x: sX + (startNode.outerWidth() / 2), y: sY + (startNode.outerHeight() / 2) }
        if (left) {
            end = { x: eX, y: eY + eHeight / 2 };
        }
        else if (right) {
            end = { x: eX + eWdith, y: eY + eHeight / 2 };
        }
        else if (top) {
            end = { x: start.x, y: eY };
        }
        else if (bottom) {
            end = { x: start.x, y: eY + eHeight };
        }
        var canvas = $(context.canvas);
        start.x -= canvas.offset().left;
        start.y -= canvas.offset().top;
        end.x -= canvas.offset().left;
        end.y -= canvas.offset().top;
        var offset = eY - sY;
        var line = { point: [] };
        var point = line.point;
        point.push({ x: start.x, y: start.y });
        if (left || right) {
            point.push({ x: start.x, y: end.y });
        }
        point.push({ x: end.x, y: end.y });
        context.beginPath();
        for (var i = 0; i < point.length; i++) {
            if (i == 0) {
                context.moveTo(point[i].x, point[i].y);
            }
            else {
                context.lineTo(point[i].x, point[i].y);
            }
            //alert(point[i].x+","+point[i].y)
        }
        context.lineJoin = "round";
        context.stroke();
        context.closePath();
        var temp1 = point[point.length - 2];
        var temp2 = point[point.length - 1];
        if (isArrow) {
            drawArrowHead(temp1, temp2, 10, 30, context);
        }
        return line;
    }

    //画箭头
    function drawArrowHead(start, end, arrowLength, arrowAngle, context) {
        var startX = start.x;
        var startY = start.y;
        var endX = end.x;
        var endY = end.y;
        var lineAngle = null;
        //线角度
        if (endX - startX != 0) {
            lineAngle = Math.atan((endY - startY) / (endX - startX));
        }
        else {
            if (endY - startY < 0)//方向向上
                lineAngle = Math.PI / 2;
            else//方向向下
                lineAngle = 3 * Math.PI / 2;
        }
        if (endY - startY >= 0 && endX - startX <= 0) {
            lineAngle = lineAngle + Math.PI;
        } else if (endY - startY <= 0 && endX - startX <= 0) {
            lineAngle = lineAngle + Math.PI;
        }
        var arrowA = arrowAngle / 2;
        var arrowB = arrowAngle / 2;
        var arrowRadians1 = arrowA * Math.PI / 180;
        var arrowRadians2 = arrowB * Math.PI / 180; //箭头夹角弧度
        var arrowRadians = arrowAngle * Math.PI / 180;

        var lineA = lineAngle * 180 / Math.PI;
        var line1 = arrowLength / Math.cos(arrowRadians1);
        var temp = lineA + arrowA;
        var offsetX = line1 * Math.cos(temp * Math.PI / 180);
        var offsetY = line1 * Math.sin(temp * Math.PI / 180);
        var px1 = end.x - offsetX;
        var py1 = end.y - offsetY;
        context.moveTo(end.x, end.y);
        context.lineTo(px1, py1);

        var temp1 = lineA - arrowB;
        var offsetX1 = line1 * Math.cos(temp1 * Math.PI / 180);
        var offsetY1 = line1 * Math.sin(temp1 * Math.PI / 180);
        var px2 = end.x - offsetX1;
        var py2 = end.y - offsetY1;
        context.beginPath();
        context.moveTo(end.x, end.y);
        context.lineTo(px2, py2);
        context.lineTo(px1, py1);
        context.stroke();
        context.fill();
        context.closePath();
    }
    //设置画布大小
    function setCanvasSize(ctl, width, height) {
        var canvas = getCanvas(ctl);
        var canvasTemp = getCanvas(ctl, true);
        var options = methods.options(ctl);
        var isdraw = false;
        if (width > canvas.outerWidth()) {
            canvas.attr("width", width);
            canvasTemp.attr("width", width);
            isdraw = true;
        }
        else if (width < canvas.outerWidth()) {
            if (width < options.width) {
                width = options.width;
            }
            canvas.attr("width", width);
            canvasTemp.attr("width", width);
            isdraw = true;
        }
        if (height > canvas.outerHeight()) {
            canvas.attr("height", height);
            canvasTemp.attr("height", height);
            isdraw = true;
        }
        else if (height < canvas.outerHeight()) {
            if (height < options.height) {
                height = options.height;
            }
            canvas.attr("height", height);
            canvasTemp.attr("height", height);
            isdraw = true;
        }
        if (isdraw) {
            var lines = methods.getAllLines(ctl);
            mappingLines(getCanvasContext(ctl), lines);
        }
        return isdraw;
    }
    //生成节点的HTML
    function createNodeHtml(ctl, nodeArgs) {
        var options = methods.options(ctl);
        var canvas = getCanvas(ctl, false);
        var node = $("<div node='1' id='node_" + (nodeArgs.code) + "' nodecode='" + (nodeArgs.code) + "' type='" + (nodeArgs.type) + "'></div>");
        //var div = $("<div/>").appendTo(node);
        node.width(nodeArgs.width).height(nodeArgs.height)
        var offset = canvas.offset();
        node.css("position", "absolute").css("zIndex", 999).css("backgroundColor", "#fff"); ;
        node.css("top", nodeArgs.top + "px").css("left", nodeArgs.left + "px");
        node.addClass(options.nodeCss);
        if (nodeArgs.backImgUrl) {
            node.css("backgroundImage", "url(" + nodeArgs.backImgUrl + ")");
        }
        addNodeEvent(ctl, node);
        node.data("nodeObject", nodeArgs);
        nodeArgs.target = node;
        //node.data("lines", []);
        node.data("parent", ctl);
        ctl.data("nodes").push(node);
        node.data("inLines", []);
        node.data("outLines", []);
        node.data("toNodes", []);
        node.data("fromNodes", []);
        var font = $("<font class='nodetext'><font style='background-color:#ffffff;'>" + nodeArgs.text + "</font></font>");
        font.attr("nodeText", 1);
        font.attr("node", "node_" + nodeArgs.code);
        font.attr("title", nodeArgs.text);

        return { nodeEl: node, fontEl: font };
    }

    //公开函数
    $.fn.flow.methods = {
        init: function (ctl, args) {
            methods = $.fn.flow.methods;
            ctl.each(function (i) {
                args = args || {};
                var opts = $.extend({}, $.fn.flow.defaultOption, args);
                var c = ctl.eq(i)
                c.data("options", opts);
                $.fn.flow.methods.draw(c, opts);
                c.data("nodes", []);
                c.addClass("flow");
                c.css("cursor", "default");
            });
        },
        options: function (ctl, args) {
            return ctl.data("options") || {};
        },
        draw: function (ctl, args) {
            var options = $.fn.flow.methods.options(ctl);
            var c = document.createElement("canvas");
            var ctemp = document.createElement("canvas");
            ctl.get(0).appendChild(c);
            ctl.get(0).appendChild(ctemp);
            var canvas = $(c);
            var canvas1 = $(ctemp);
            var canvasOffset = canvas.offset();
            var width, height;
            if (!options.fit) {
                width = options.width;
                height = options.height;
            }
            else {
                if (!$.support.boxModel) {
                    width = ctl.parent().width();
                    height = ctl.parent().height();
                }
                else {
                    width = ctl.parent().width() - (options.borderWidth * 2);
                    height = ctl.parent().height() - (options.borderWidth * 2);
                }
            }
            ctl.width(width).height(height)
            if (options.borderWidth > 0) {
                ctl.css("border", options.borderWidth + "px " + options.borderColor + " solid");
                width -= (options.borderWidth * 2);
                height -= (options.borderWidth * 2);
            }
            canvas.attr({ "width": width, "height": height });
            canvas1.attr({ "width": width, "height": height });
            canvas.css({ "position": "absolute" });
            canvas1.css({ "position": "absolute", "zIndex": 99 });

            ctl.data("canvas", canvas);
            ctl.data("isDrawLine", false);
            ctl.data("canvasTemp", canvas1);

            var captionbox = $("<div class=\"captionbox\" style=\"position:absolute;display:none;z-index:1000;\"></div>").appendTo(ctl);

            var fromNode = null;
            var toNode = null;
            var isMapping = false;
            //alert(canvas.get(0).outerHTML)
            if ($.browser.msie && parseFloat($.browser.version) < 9) {
                window.G_vmlCanvasManager.initElement(c);
                window.G_vmlCanvasManager.initElement(ctemp);
            }
            var context = getCanvasContext(ctl, false);
            var contextTemp = getCanvasContext(ctl, true);
            var selectLine = null;
            var hoverLine = null;
            var hoverNode = null;
            ctl.bind("contextmenu", function (evt) {
                if (hoverLine) {
                    if ($.isFunction(options.lineContextmenu)) {
                        options.lineContextmenu(ctl, hoverLine, evt);
                    }
                }
                return false;
            });
            ctl.bind("selectstart", function (evt) { return false; });
            ctl.css("-moz-user-select", "none");

            ctl.bind("click", function (evt) {
                //画线
                if (isDrawLine(ctl)) {
                    var target = $(evt.target);
                    if (isNode(target.get(0))) {
                        if (isDrawLine(ctl)) {
                            lineStartNode = target;
                            var offset = lineStartNode.offset();
                            drawingLinePoint.push({ x: offset.left + lineStartNode.outerWidth() / 2, y: offset.top + lineStartNode.outerHeight() / 2 });
                        }
                    }
                    else if (isCanvas(target.get(0))) {
                        var offset = lineStartNode.offset();
                        DrawLineHandler(ctl, drawingLinePoint[drawingLinePoint.length - 1], null, false, evt);
                        drawingLinePoint.push({ x: evt.pageX, y: evt.pageY });
                    }
                }
            });
            ctl.bind("mousedown", function (evt) {
                var target = $(evt.target);
                $.emptySelected();
                if (evt.which == 1) {
                    isDown = true;
                    if (target.get(0).tagName == "DIV" && target.attr("node") == "1") {
                        isDrag = true;
                        dragNode = target;
                        var offset = target.offset();
                        var x = evt.pageX;
                        var y = evt.pageY;
                        var offsetX = x - offset.left;
                        var offsetY = y - offset.top;
                        dragNodeOffset = { x: offsetX, y: offsetY };
                    }
                    //                    if (isDrawLine(ctl)) {
                    //                        //确定画线的开始节点
                    //                        if (evt.target.tagName == "DIV") {
                    //                            var div = $(evt.target);
                    //                            if (div.attr("node") == "1") {
                    //                                fromNode = div;
                    //                            }
                    //                        }
                    //                    }
                }
                hideCaption(captionbox);
            });
            ctl.bind("mousemove", function (evt) {
                hoverLine = null;
                hoverNode = null;
                //captionbox.hide();
                //$.emptySelected();
                //如果处于画线状态
                if (isDrawLine(ctl)) {
                    if (isCanvas(evt.target)) {
                        var context = getCanvasContext(ctl, true);
                        clearCanvas(context);

                        var sp = drawingLinePoint[drawingLinePoint.length - 1];
                        if (sp) {
                            DrawLineHandler(ctl, sp, { x: evt.pageX, y: evt.pageY }, true, evt);
                        }
                        drawLineForPoints(drawingLinePoint, context);
                    }

                }
                else {
                }
                if (isDown) {
                    if (isDrawLine(ctl)) {
                        //                        if (!lineStartNode) {
                        //                            return;
                        //                        }
                        //                        ctl.css("cursor", "crosshair");

                        //                        ctl.css("cursor", "crosshair");
                        //                        if (evt.target.tagName == "DIV" && fromNode) {
                        //                            var div = $(evt.target);
                        //                            if (div.attr("node") != "1" || div.get(0) == fromNode.get(0)) {
                        //                                toNode = null;
                        //                            }
                        //                            else {
                        //                                toNode = div;
                        //                            }
                        //                        }
                        //                        if (fromNode) {
                        //                            DrawLineHandler(ctl, fromNode, toNode, evt);
                        //                        }
                        //                        toNode = null;
                    }
                    else {
                        //拖拽节点
                        if (dragNode) {
                            ctl.css("cursor", "move");
                            var toNodes = $.fn.flow.methods.getToNodesByNode(ctl, dragNode);
                            var fromNodes = $.fn.flow.methods.getFromNodesByNode(ctl, dragNode);
                            var x = evt.pageX - dragNodeOffset.x + ctl.scrollLeft();
                            var y = evt.pageY - dragNodeOffset.y + ctl.scrollTop();
                            if (x < canvasOffset.left) {
                                x = canvasOffset.left;
                            }
                            if (y < canvasOffset.top) {
                                y = canvasOffset.top;
                            }
                            //document.title = ctl.scrollLeft();
                            x -= canvasOffset.left;
                            y -= canvasOffset.top;
                            dragNode.css("top", y);
                            dragNode.css("left", x);
                            ismove = true;
                            setNodeLeftTop(ctl, dragNode, y, x);

                            //                            if (!isMapping) {
                            //                                isMapping = true;
                            //                                var lines = getLinesExcludeByNode(ctl, dragNode);
                            //                                mappingLines(getCanvasContext(ctl, false), lines);
                            //                            }
                            //                            var contextTemp = getCanvasContext(ctl, true)
                            //                            clearCanvas(contextTemp);
                            //                            for (var i = 0; i < toNodes.length; i++) {
                            //                                var line = getLine(dragNode, toNodes[i]);
                            //                                var color = line.color || blackLine;
                            //                                lineStyle(getCanvasContext(ctl, true), 1, color);
                            //                                drawMLine(dragNode, toNodes[i], contextTemp, true);
                            //                            }
                            //                            for (var i = 0; i < fromNodes.length; i++) {
                            //                                var line = getLine(fromNodes[i], dragNode);
                            //                                var color = line.color || blackLine;
                            //                                lineStyle(getCanvasContext(ctl, true), 1, color);
                            //                                drawMLine(fromNodes[i], dragNode, contextTemp, true);
                            //                            }
                        }
                    }
                }
                else {
                    //                    var mouse = { x: evt.pageX - canvas.offset().left, y: evt.pageY - canvas.offset().top };
                    //                    var lines = $.fn.flow.methods.getAllLines(ctl);
                    //                    for (var i = 0; i < lines.length; i++) {
                    //                        var line = lines[i];
                    //                        for (var n = 0; n < line.point.length - 1; n++) {
                    //                            var point = line.point[n];
                    //                            if (line.point[n + 1]) {
                    //                                if (pointInLine(mouse, point, line.point[n + 1])) {
                    //                                    hoverLine = line;
                    //                                }
                    //                            }
                    //                        }
                    //                        if (hoverLine) {
                    //                            break;
                    //                        }
                    //                    }
                    //                    if (evt.target.tagName == "DIV") {
                    //                        var n = $(evt.target);
                    //                        if (n.attr("node") == "1") {
                    //                            hoverNode = n;
                    //                        }
                    //                    }
                    //                    if (hoverLine || hoverNode) {
                    //                        if (hoverLine) {
                    //                            //                            var contextTemp = getCanvasContext(ctl, true);
                    //                            //                            contextTemp.clearRect(0, 0, canvas.width(), canvas.width());
                    //                            //                            lineStyle(contextTemp, 2, radLine);
                    //                            //                            drawMLine(hoverLine.fromNode, hoverLine.toNode, contextTemp, true);
                    //                        }
                    //                        //显示线备注
                    //                        window.setTimeout(function () {
                    //                            var caption = (hoverLine && hoverLine.caption) ? hoverLine.caption : "";
                    //                            showCaption(ctl, caption, { x: evt.pageX, y: evt.pageY }, null);
                    //                        }, 50);
                    //                    }
                    //                    else {
                    //                        var contextTemp = getCanvasContext(ctl, true);
                    //                        contextTemp.clearRect(0, 0, canvas.width(), canvas.width());
                    //                        hideCaption(captionbox);
                    //                    }
                }
            });
            ctl.bind("mouseup", function (evt) {
                //                hideCaption(captionbox);
                //                if (evt.which == 1) {
                //                    if (isDrawLine(ctl)) {
                //                        if (evt.target.tagName == "DIV") {
                //                            var tnode = $(evt.target);
                //                            if (tnode.attr("node") == "1" && fromNode.get(0) != tnode.get(0)) {
                //                                if (fromNode) {
                //                                    $.fn.flow.methods.addLine(ctl, { fromNode: fromNode, toNode: tnode });
                //                                }
                //                            }
                //                        }
                //                    }
                //                    else {
                //                        //放开拖拽节点
                //                        if (dragNode) {
                //                            var context = getCanvasContext(ctl, false);
                //                            var toNodes = $.fn.flow.methods.getToNodesByNode(ctl, dragNode);
                //                            var fromNodes = $.fn.flow.methods.getFromNodesByNode(ctl, dragNode);
                //                            for (var i = 0; i < toNodes.length; i++) {
                //                                var tNode = toNodes[i];
                //                                var line = getLine(dragNode, tNode);
                //                                var color = line.color || blackLine;
                //                                lineStyle(context, 1, color);
                //                                var newline = drawMLine(dragNode, tNode, context, true);
                //                                line.point = newline.point;
                //                            }
                //                            for (var i = 0; i < fromNodes.length; i++) {
                //                                var fNode = fromNodes[i];
                //                                var line = getLine(fNode, dragNode);
                //                                var color = line.color || blackLine;
                //                                lineStyle(context, 1, color);
                //                                var newline = drawMLine(fNode, dragNode, context, true);
                //                                line.point = newline.point;
                //                            }
                //                        }
                //                    }
                //                    if (hoverLine) {
                //                        var lines = $.fn.flow.methods.getAllLines(ctl);
                //                        selectedLine(ctl, hoverLine, lines);
                //                        selectedNode(ctl, null);
                //                        mappingLines(getCanvasContext(ctl, false), lines);
                //                        if ($.isFunction(options.lineSelected)) {
                //                            options.lineSelected(hoverLine);
                //                        }
                //                    }
                //                    var e = $(evt.target);
                //                    if (e.attr("node") != "1" && !hoverLine) {
                //                        if ($.isFunction(options.panelClick)) {
                //                            options.panelClick(ctl);
                //                        }
                //                    }
                //                    isDown = false;
                //                    fromNode = null;
                //                    toNode = null;
                //                    isMapping = false;
                //                    dragNode = null;
                //                    //hoverLine = null;
                //                    ctl.css("cursor", "default");
                //                    if (options.autoEndDrawLine != false) {
                //                        $.fn.flow.methods.endDrawLine(ctl);
                //                    }
                //                    var context = getCanvasContext(ctl, true);
                //                    clearCanvas(context);
                //                    $.emptySelected();
                //                }
                if (isDrag) {
                    evt.preventDefault();
                    evt.stopPropagation();
                }
                isDown = false;
                isDrag = false;
                dragNode = null;
                dragNodeOffset = null;
                ctl.css("cursor", "default");

            });
        },
        //开始创建节点
        beginDrawNode: function (ctl, args) {
            ctl.data("isDrawNode", true);
        },
        endDrawNode: function (ctl, args) {
            ctl.data("isDrawNode", false);
            ctl.css("cursor")
        },
        //添加一个节点
        addNode: function (ctl, args) {
            var options = $.fn.flow.methods.options(ctl);
            var canvas = getCanvas(ctl, false);
            var nodeArgs = $.extend({}, $.fn.flow.defaultNodeOption, args);
            var nodeWidth = nodeArgs.width;
            var nodeHeight = nodeArgs.height;
            var c = "";
            if (!nodeArgs.code) {
                nodeArgs.code = $.newGuid();
            }
            c = nodeArgs.code;
            //nodeArgs.level = -1;
            if ($.isFunction(options.addNodeBefore)) {
                if (options.addNodeBefore(ctl, nodeArgs) == false) {
                    return;
                }
            }
            var html = createNodeHtml(ctl, nodeArgs);
            html.nodeEl.appendTo(ctl);
            html.fontEl.appendTo(ctl);
            setNodeJoinElement(html.nodeEl, canvas);
            //            var node = $("<div node='1' id='node_" + (nodeArgs.code) + "' nodecode='" + (nodeArgs.code) + "' type='" + (nodeArgs.type) + "'></div>").appendTo(ctl);
            //            var offset = canvas.offset();
            //            node.width(nodeWidth).height(nodeHeight).css("position", "absolute").css("zIndex", 999).css("backgroundColor", "#fff"); ;
            //            node.css("top", nodeArgs.top).css("left", nodeArgs.left);
            //            node.addClass(options.nodeCss);
            //            if (nodeArgs.backImgUrl) {
            //                node.css("backgroundImage", "url(" + nodeArgs.backImgUrl + ")");
            //            }
            //            addNodeEvent(ctl, node);
            //            node.data("nodeObject", nodeArgs);
            //            //node.data("lines", []);
            //            node.data("parent", ctl);
            //            ctl.data("nodes").push(node);
            //            node.data("inLines", []);
            //            node.data("outLines", []);
            //            node.data("toNodes", []);
            //            node.data("fromNodes", []);
            //            var font = $("<font class='nodetext'><font style='background-color:#ffffff;'>" + nodeArgs.text + "</font></font>").appendTo(ctl);
            //            font.attr("nodeText", 1);
            //            font.attr("node", "node_" + c);
            //            font.attr("title", nodeArgs.text);
            //            setNodeJoinElement(node, canvas);
            if ($.isFunction(options.addNodeAfter)) {
                options.addNodeAfter(ctl, html.nodeEl);
            }
            return html.nodeEl;
        },
        updateNode: function (ctl, args) {
            var node = args;
            var nodeObject = methods.getNodeObject(ctl, node);
            methods.setText(ctl, { "node": node, "text": nodeObject.text });
        },
        removeNode: function (ctl, args) {
            var node = args;
            var options = methods.options(ctl);
            var toNodes = methods.getToNodesByNode(ctl, node);
            var fromNodes = methods.getFromNodesByNode(ctl, node);
            //var fn = fromNodes[0];
            //var tn = toNodes[0];
            if ($.isFunction(options.removeNodeBefore)) {
                try {
                    if (options.removeNodeBefore(ctl, node) == false) {
                        return;
                    }
                }
                catch (ex) {
                    alert("删除节点出错:" + ex.description);
                    return;
                }
            }
            var n = null;
            for (var i = 0; i < toNodes.length; i++) {
                var n = toNodes[i];
                var line = getLine(node, n);
                if (line) {
                    removeLineByNode(node, line);
                    removeLineByNode(n, line);
                }
            }
            for (var i = 0; i < fromNodes.length; i++) {
                var n = fromNodes[i];
                var line = getLine(n, node);
                if (line) {
                    removeLineByNode(node, line);
                    removeLineByNode(n, line);
                }
            }

            n = toNodes.length - 1;
            while (toNodes.length > 0) {
                var cn = toNodes[n];
                removeNodeByNode(node, cn);
                n--;
            }
            n = fromNodes.length - 1;
            while (fromNodes.length > 0) {
                var cn = fromNodes[n];
                removeNodeByNode(cn, node);
                n--;
            }
            var nodes = methods.getAllNodes(ctl);
            n = nodes.length - 1;
            while (n >= 0) {
                var cn = nodes[n];
                if (cn.get(0) == node.get(0)) {
                    var font = $("font[nodeText=1][node=" + cn.attr("id") + "]");
                    font.remove();
                    cn.remove();
                    nodes.splice(n, 1);
                    break;
                }
                n--;
            }
            if ($.isFunction(options.removeNodeAfter)) {
                options.removeNodeAfter(ctl, node, fromNodes, toNodes);
            }

            var lines = methods.getAllLines(ctl);
            var context = getCanvasContext(ctl, false);
            clearCanvas(context);
            mappingLines(context, lines);
        },
        //通过CODE获取节点DOM元素
        getNodeByCode: function (ctl, args) {
            args = args || -1;
            var node = ctl.children("DIV[node=1][nodecode=" + args + "]");
            if (node.length > 0) {
                return node;
            }
            return null;
        },
        //获取开始节点
        getStartNode: function (ctl, args) {
            var node = ctl.children("DIV[node=1][type=start]");
            if (node.length > 0) {
                return node.eq(0);
            }
            return null;
        },
        //获取节点的数据对象
        getNodeObject: function (ctl, args) {
            try {
                return args.data("nodeObject");
            }
            catch (ex) {
                return null;
            }
        },
        //获取所有节点
        getAllNodes: function (ctl, args) {
            return ctl.data("nodes");
        },
        //获取所有线
        getAllLines: function (ctl, args) {
            var lines = [];
            var nodes = $.fn.flow.methods.getAllNodes(ctl);
            for (var i = 0; i < nodes.length; i++) {
                var nodeLines = $.fn.flow.methods.getLinesByNode(ctl, nodes[i]);
                for (var n = 0; n < nodeLines.length; n++) {
                    if ($.inArray(nodeLines[n], lines) < 0) {
                        lines.push(nodeLines[n]);
                    }
                }
            }
            return lines;
        },
        getLine: function (ctl, args) {
            //getLine(
            var fnode = args.fromNode;
            var tnode = args.toNode;
            var line = getLine(fnode, tnode);
            return line;
        },
        //获取当前节点的线
        getLinesByNode: function (ctl, args) {
            var node = args;
            //return node.data("lines");
            var lines = [];
            var line1 = $.fn.flow.methods.getOutLinesByNode(ctl, node);
            var line2 = $.fn.flow.methods.getInLinesByNode(ctl, node);
            if (line1) {
                for (var n = 0; n < line1.length; n++) {
                    if ($.inArray(line1[n], lines) < 0) {
                        lines.push(line1[n]);
                    }
                }
            }
            if (line2) {
                for (var n = 0; n < line2.length; n++) {
                    if ($.inArray(line2[n], lines) < 0) {
                        lines.push(line2[n]);
                    }
                }
            }
            return lines;
        },
        //获取当前节点的出线
        getOutLinesByNode: function (ctl, args) {
            var node = args;
            return node.data("outLines");
        },
        //获取当前节点的入线
        getInLinesByNode: function (ctl, args) {
            var node = args;
            return node.data("inLines");
        },
        //获取下级节点
        getToNodesByNode: function (ctl, args) {
            var node = args;
            return node.data("toNodes");
        },
        //获取上级节点
        getFromNodesByNode: function (ctl, args) {
            var node = args;
            return node.data("fromNodes");
        },
        //开始画线
        startDrawLine: function (ctl, args) {
            startDrawLine(ctl);
        },
        //结束画线
        endDrawLine: function (ctl, args) {
            endDrawLine(ctl);
        },
        //在两个节点间添加线
        addLine: function (ctl, args) {
            var options = methods.options(ctl);
            var fnode = args.fromNode;
            var tnode = args.toNode;
            var code = args.code;
            if (fnode.get(0) == tnode.get(0)) {
                return;
            }
            var toNodes = $.fn.flow.methods.getToNodesByNode(ctl, fnode);
            for (var i = 0; i < toNodes.length; i++) {
                if (tnode.get(0) == toNodes[i].get(0)) {
                    return;
                }
            }
            if (!args.nobefore) {
                if ($.isFunction(options.addLineBefore)) {
                    if (options.addLineBefore(ctl, fnode, tnode) == false) {
                        return;
                    }
                }
            }
            var context = getCanvasContext(ctl, false);
            lineStyle(context, 1, "#000000");
            var line = drawMLine(fnode, tnode, context, true);
            line.fromNode = fnode;
            line.toNode = tnode;
            line.caption = args.caption;
            line.code = code || $.newGuid();
            line = $.extend(args, line);
            //启始节点增加一根出线
            addLineByNode(fnode, line, false);
            //结束节点增加一根入线
            addLineByNode(tnode, line, true);
            //为连接的节点添加关系
            addNodebyNode(fnode, tnode);
            if ($.isFunction(options.addLineAfter)) {
                options.addLineAfter(ctl, line);
            }
            return line;
        },
        removeLine: function (ctl, args) {
            var line = args;
            var options = methods.options(ctl);
            if (line) {
                var fromNode = line.fromNode;
                var toNode = line.toNode;
                line.disable = true;
                if (fromNode) {
                    removeLineByNode(fromNode, line);
                }
                if (toNode) {
                    removeLineByNode(toNode, line);
                }
                removeNodeByNode(fromNode, toNode);
                if ($.isFunction(options.removeLineAfter)) {
                    options.removeLineAfter(ctl, line);
                }
                var lines = $.fn.flow.methods.getAllLines(ctl);
                var context = getCanvasContext(ctl, false);
                clearCanvas(context);
                mappingLines(context, lines);
            }
        },
        //移动节点
        moveNode: function (ctl, args) {
            var top = args.top;
            var left = args.left;
            var node = args.node;
            var nodeObj = methods.getNodeObject(ctl, node);
            var options = methods.options(ctl);
            var canvas = getCanvas(ctl);
            if (nodeObj) {
                setNodeLeftTop(ctl, node, top, left);
                var w = canvas.outerWidth();
                var h = canvas.outerHeight();
                if (left > canvas.outerWidth() || top > canvas.outerHeight()) {
                    if (left > canvas.outerWidth()) {
                        w = left + node.outerWidth();
                    }
                    else if (top > canvas.outerHeight()) {
                        h = top + node.outerHeight();
                    }
                    setCanvasSize(ctl, w, h);
                }
                else {
                    var lines = methods.getAllLines(ctl);
                    mappingLines(getCanvasContext(ctl), lines);
                }
            }
        },
        addChildFlowNode: function (ctl, args) {
            var pnode = args.parent;
            var cnode = args.child;
            var pnodeObj = methods.getNodeObject(ctl, pnode);
            var cnodeObj = methods.getNodeObject(ctl, cnode);
            if (pnodeObj && cnodeObj) {
                if (!pnodeObj.childFlowNodes) {
                    pnodeObj.childFlowNodes = [];
                }
                pnodeObj.childFlowNodes.push(cnodeObj.code);
                cnodeObj.parentNodeCode = pnodeObj.code;
                //cnodeObj.level = pnodeObj.level + 1;
            }
        },
        removeChildFlowNode: function (ctl, args) {
            var pnode = args.parent;
            var cnode = args.child;
            var pnodeObj = methods.getNodeObject(ctl, pnode);
            var cnodeObj = methods.getNodeObject(ctl, cnode);
            if ($.isArray(pnodeObj.childFlowNodes)) {
                var index = $.inArray(cnodeObj.code, pnodeObj.childFlowNodes);
                if (index >= 0) {
                    pnodeObj.childFlowNodes.splice(index, 1);
                    if (pnodeObj.childFlowNodes.length <= 0) {
                        pnodeObj.childFlowNodes = null;
                    }
                }
            }
            cnodeObj.parentNodeCode = null;
            //cnodeObj.level = 0;
        },
        setText: function (ctl, args) {
            var node = args.node;
            var text = args.text;
            var nodeObject = methods.getNodeObject(ctl, node);
            if (nodeObject) {
                nodeObject.text = text;
                var font = $("font[nodeText=1][node=" + node.attr("id") + "]").children("font");
                font.html(text);
            }
        },
        resize: function (ctl, args) {
            var options = $.fn.flow.methods.options(ctl);
            var w = args.width || options.width;
            var h = args.height || options.height;
            //alert(args.width + "," + args.height + "," + $.support.boxModel)
            if ($.support.boxModel) {
                w -= options.borderWidth * 2;
                h -= options.borderWidth * 2;
            }
            //alert(w+","+h)
            ctl.width(w).height(h);
            if (options.borderWidth > 0) {
                ctl.css("border", options.borderWidth + "px " + options.borderColor + " solid");
                w -= (options.borderWidth * 2);
                h -= (options.borderWidth * 2);
            }
            var canvas = getCanvas(ctl);
            var canvas1 = getCanvas(ctl, true);
            canvas.attr({ "width": w, "height": h });
            canvas1.attr({ "width": w, "height": h });
            canvas.css({ "position": "absolute" });
            canvas1.css({ "position": "absolute", "zIndex": 99 });
            var lines = methods.getAllLines(ctl);
            mappingLines(getCanvasContext(ctl), lines);
        }
    }
});